<template>
  <div id="todo">
    <h1>待办事项</h1>
    <!--    <input v-model="newThing" @keyup.enter="input"/>-->
    <input v-model="newThing" @keyup.enter="input"/>
    <button @click="input">添加</button>
    <hr>
    <ul>
      <li v-for="t in things">
        <input  type="checkbox" @click="()=>t.status=!t.status"></input>
        <span :class="{finish:t.status}" :style="t.status?' background-color: hotpink':' background-color: green'">{{t.text}} </span>

        <button @click="del(t)">删除</button>
      </li>
    </ul>
<!--    <Girl idiom="美得不可方物" @hi="he"></Girl>-->
  </div>
</template>

<script>

  import Girl from "./girl";
  function set(key, val) {
    localStorage.setItem(key, JSON.stringify(val));
    // localStorage.setItem(key, val);
  }
  function get(key) {
    return JSON.parse(localStorage.getItem(key));
    // return localStorage.getItem(key);
  }
  var myStorage = {
    set: set,
    get: get
  };

  import GirlComponent from "./girl.vue"
  export default {
    name: "todo",
    components:{
      Girl,
      GirlComponent
    },
    data() {
      return {
        things: [],
        newThing: ''
      }
    },
    methods: {
      input() {
        this.things.push({text:this.newThing,status:false})
        this.newThing = ''
      },
      del(thing) {
        let index = this.things.indexOf(thing)

        this.things.splice(index, 1)
      },
      he(e){
        console.log("from girl component message",e)
      }

    },
    watch: {
      things: {
        deep: true,
        handler: function (newVal, oldVal) {
          if(newVal) {
            myStorage.set('things', newVal)
          }else{
            myStorage.set('things', oldVal)
          }
        }
      }
    },
    mounted() {
      this.things=myStorage.get('things')||[]
    }
  }
</script>

<style scoped>
  #todo {
    text-align: center;
  }

  ul li {
    text-decoration: none;
  }

  .finish{
    text-decoration:line-through;
    opacity: 5;
  }

  .bg{
    background-color: hotpink;
  }
</style>
